import styles from './index.module.less'
import { NavLink } from 'react-router-dom'
import { loginOut } from '@/api/user'
import { handleLocalUserInfo } from '@/utils/utils'
import { useUserInfo } from '@/utils/hooks'

const navList = [
  {
    name: '营销中心',
    url: '/market-center',
  },
  {
    name: '账号资产',
    url: '/asset',
  },
]

const Index = () => {
  const { clearUserToken } = handleLocalUserInfo()
  const { user } = useUserInfo()
  const logout = async () => {
    const res = await loginOut()
    if (!res.code) {
      clearUserToken()
      window.location.reload()
    }
  }

  return (
    <header className={styles.header}>
      <div className={styles.logoBox}>
        <img src="/images/histar-logo.webp" className={styles.logo} />
      </div>
      <nav className={styles.nav}>
        {navList.map((item) => {
          return (
            <NavLink to={item.url} key={item.url} className={({ isActive }) => [isActive ? styles.navActive : '']}>
              {item.name}
            </NavLink>
          )
        })}
      </nav>
      <section className={styles.rightMenu}>
        <div className={styles.head}>
          <div className={styles.headBtn}>
            <span className="textEllipsis">{user.email}</span>
            <img src="/images/expend.webp" alt="展开" />
          </div>
          <div className={styles.loginedBox}>
            <NavLink to="/account" className={styles.btn}>
              个人信息
            </NavLink>
            <div className={styles.btn} onClick={logout}>
              退出登录
            </div>
          </div>
        </div>
      </section>
    </header>
  )
}

export default Index
